<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				margin: 0 auto;
				width: 860px;
				height: 540px;
				background-image: url("img/1.png");
				background-size: 100% 100%;
				position: relative;
			}

			.left {
				position: absolute;
				left: 20px;
				top: 270px;
			}

			.right {
				position: absolute;
				right: 20px;
				top: 270px;
			}

			ul {
				position: absolute;
				bottom: 20px;
				right: 40px;
			}

			li {
				float: left;
				margin-left: 10px;
				list-style: none;
				width: 20px;
				height: 20px;
				background-color: #007BFF;
				color: white;
				cursor: pointer;
				border-radius: 15px;
				text-align: center;
			}

			li:hover {
				background-color: white;
			}

			.active {
				background-color: white;
			}
		</style>
		<script>
			let pic = [
				"url(img/1.png)",
				"url(img/eraser.jpg)",
				"url(img/mouse.jpg)",
				"url(img/paper.jpg)",
				"url(img/pen.jpg)"
			]
			window.onload = function() {
				let div = document.querySelector('div')
				let lis = document.querySelectorAll('li')
				let left = document.querySelector('.left')
				let right = document.querySelector('.right')
				let a = 1;
				for (let i = 0; i <= lis.length - 1; i++) 
				{
					lis[i].onmouseover = function() 
					{
						for(let i = 0; i <= lis.length - 1; i++)
						{
							lis[i].className=''
						}
						div.style.backgroundImage = pic[i];
						a = i;
						lis[i].className='active'
					}
				}
				left.onclick = function() 
				{
					lis[a].className=''
					a--;
					if (a == -1) 
					{
						div.style.backgroundImage = pic[4];
						a = 4;
						lis[a].className='active'
					} else 
					{
						div.style.backgroundImage = pic[a];
						lis[a].className='active'
					}
				}
				right.onclick = function() 
				{
					lis[a].className=''
					a++;
					if (a == 5) 
					{
						div.style.backgroundImage = pic[0];
						a = 0;
						lis[a].className='active'
					} else 
					{
						div.style.backgroundImage = pic[a];
						lis[a].className='active'
					}
				}
			}
		</script>
	</head>
	<body>
		<div>
			<button class="left">< </button>
			<button class="right">></button>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
		</div>
	</body>
</html>